function lunBoTu() {
    var res = document.getElementById('banner');
    var interspace = document.querySelector('.interspace');
    var ul = res.querySelector('ul');
    var ol = res.querySelector('ol');
    console.log(ol);
    //获取轮播图可视区域宽度
    var focusWidth = res.offsetWidth;
    var index = 0;
    var timer = setInterval(() => {
        index++;
        var translatex = -index * focusWidth;
        ul.style.transition = 'all .5s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
    }, 2000);
    //transitionend过度完成后触发的事件
    ul.addEventListener('transitionend', function (e) {
        //无缝滚动
        if (index >= 3) {
            index = 0;
            //去掉过度效果，让ul快速的跳回第一个
            ul.style.transition = 'none';
            //然后让最新的索引号乘以宽度，去滚动图片
            translatex = -index * focusWidth;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        } else if (index < 0) {
            index = 2;
            //下面的原理一样
            ul.style.transition = 'none';
            translatex = -index * focusWidth;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        //小圆圈的变化
        //先让ol里带有current的类全部清掉
        ol.querySelector('.current').classList.remove('current');
        //当前index的li添加类名
        ol.children[index].classList.add('current')

    })
    //触摸事件
    var startX = 0,
        moveX = 0; //获取手指的初始坐标和移动坐标
    var flag = false; //开启节流阀
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX;
        //手指触摸时停止定时器
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function (e) {
        //计算移动的距离
        moveX = e.targetTouches[0].pageX - startX;
        //移动盒子的距离=盒子原来的位置+手指移动的距离
        var translatex = -index * focusWidth + moveX;
        //手指滑动时，取消过度效果
        ul.style.transition = 'none';
        //让盒子动起来
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true; //如果触发了move事件我们才去做下面end的判断，否则不做判断
    });

    //手指离开，根据移动距离去判断是回弹还是播放上一张或下一张
    ul.addEventListener('touchend', function (e) {
        if (flag) {
            //如果移动的距离大于50px，我们才播放下一张或上一张
            if (Math.abs(moveX) > 50) {
                // 如果moveX是正值的话，那就是右滑，播放上一张
                if (moveX > 0) {
                    index--;
                } else { // 否则左滑，播放下一张
                    index++;
                }
                //从新把要移动的距离的值赋给translatex
                var translatex = -index * focusWidth;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else { //如果移动的距离小于50px，我们就回弹
                var translatex = -index * focusWidth;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        clearInterval(timer);
        timer = setInterval(() => {
            index++;
            var translatex = -index * focusWidth;
            ul.style.transition = 'all .5s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });


}
lunBoTu();